/**
 * Created by star on 2015/9/9.
 */
import React from 'react';
import Immutable  from 'immutable';
import './mi-top-B-bar.less';
import {msg} from "iflux";
   
import Cart from './mi-top-B-bar-cart.js';
import {componentsDomCreate} from 'x-site-integrate';

import {userInfoApi} from 'x-site-ui-base/bus-api';


let MiTop_B_Bar = React.createClass({
	getDefaultProps(){
	},
	getInitialState(){
		return {
			nickName: null,
			cartNum: 0,
			cartData: Immutable.List()
		}
	},
	componentDidMount:function(){
		//非首页去除qmBar、qmGroup
		if(window.XSite_Info.pageType != 'index') {
			$('.top-mi-b').removeClass('qmBar').removeClass('qmGroup');
			$('.top-mi-b .qmGroup').removeClass('qmGroup');
		}

		if(this.props.ENV_EDITING){//如果是编译状态跳过数据获取的步骤
			//return ;
		}else{
			userInfoApi && userInfoApi.getUserNickName && userInfoApi.getUserNickName().then(nickName=>{
				this.setState({nickName});
			})
		}

		msg.once('XSite:Api:userAction:login::success',()=>{
			//取用户信息
			userInfoApi && userInfoApi.getUserNickName && userInfoApi.getUserNickName().then(nickName=>{
				this.setState({nickName});
			});
			window.XSite_Info.initCart();
		});
		// 验证是否登录
		let _this  =this;

		window.XSite_Info.initCart = () =>{
			// 获取购物车数据
			$.get('/mini_card', function(json) {
				if (json.data && json.data.cartList) {
					_this.setState({cartNum: json.data.cartList.length});
					_this.setState({cartData: Immutable.fromJS(json.data.cartList)})
				} else {
					_this.setState({cartNum: 0});
					_this.setState({cartData: Immutable.List()})
				}
			});
			$(".mi-top-cart").hover(function(){
				var val = $(this).find(".cartNum").text();
				if(val != 0){
					$(".mi-cart").show();
				}else{
					$(".cart_body_null").show();
				}
			}, function () {
				$(".mi-cart").hide();
				$(".cart_body_null").hide();
			});
		};
		window.XSite_Info.cartShow = true;
		window.XSite_Info.initCart();
	},
    render(){
		var  loginHtml =
			this.state.nickName ?
				<div className="mi-top-login"><span>欢迎， </span><a href="/user_center">{this.state.nickName}</a><span>|</span> <a href="/logout">退出</a></div>:
				<div className="mi-top-login"><a href="/login" className="style_color_hover">登录</a><span>|</span> <a href="/register" className="style_color_hover">注册</a></div>;
		var domContents = componentsDomCreate(this.props.items);

		return(<div  data-widget-path={this.props.dataWidgetPath}
                     className="qmBar qmGroup top-mi-b mouseHover ui-state-default ui-sortable-handle x-head-1">
	           				<div className="mi-top-main s-w">
					<ul>
						{domContents}
					</ul>
					<div className="mi-top-cart">
						<a href="/cart" className="style_color_hover">
							<i className="ion-android-cart"></i>购物车
                        <span>
                            <i>(</i><i className="cartNum">{this.state.cartNum}</i><i>)</i>
                        </span>
							<span className="blackIcon"></span>
						</a>
						<Cart cartData={this.state.cartData}  />
					</div>
					{loginHtml}

				</div>
            </div>
        )
    }
});


__XSite_widgetInject(MiTop_B_Bar);

// module.exports = MiTop_B_Bar;